import React, { useState, useEffect } from "react";
import axios from "../utils/request";
import { useNavigate } from "react-router-dom";
import { Toast } from "react-vant";
type Props = {};

const QueryList = (props: Props) => {
  const [data, setData]: any = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    (async () => {
      let res = await axios.get("/querylist");
      setData(res.data);
    })();
  }, []);
  //返回到首页
  const goHome = () => {
    navigate("/index/home");
  };
  //只看高铁/动车
  //做筛选
  const [stateFlag, setStateFlag]: any = useState(false);
  const [voteFlag, setVoteFlag]: any = useState(false);
  const [sortFlag, setSortFlag]: any = useState(false);
  const [title, setTitle] = useState("出发早-晚");
  //耗时/出发
  const btnSort = () => {
    setSortFlag(!sortFlag);
  };
  //只看高铁/动车
  const state = () => {
    setStateFlag(!stateFlag);
  };
  //   只看有票
  const vote = () => {
    setVoteFlag(!voteFlag);
  };
  //深度监听筛选状态
  useEffect(() => {
    //  耗时/出发的改变
    if (sortFlag) {
      setTitle("耗时短-长");
      //获取列车时间的数字
      let s = data.sort((a: any, b: any) => {
        return a.time.replace(/[^0-9]/gi, "") - b.time.replace(/[^0-9]/gi, "");
      });
      setData(s);
    } else {
      setTitle("出发早-晚");
      if (stateFlag || voteFlag) {
        let s = data.sort((a: any, b: any) => {
          return (
            a.starttime.replace(/[^0-9]/gi, "") -
            b.starttime.replace(/[^0-9]/gi, "")
          );
        });
        setData(s);
      } else {
        (async () => {
          let res = await axios.get("/querylist");
          let s = res.data.sort((a: any, b: any) => {
            return (
              a.starttime.replace(/[^0-9]/gi, "") -
              b.starttime.replace(/[^0-9]/gi, "")
            );
          });
          setData(s);
        })();
      }
    }
  }, [sortFlag]);
  //深度监听筛选状态
  useEffect(() => {
    //只看高铁/动车的改变
    if (stateFlag) {
      let arr = data.filter((item: any) => item.state === "G");
      setData(arr);
    } else if (!stateFlag && voteFlag && sortFlag) {
      console.log(123);
      (async () => {
        let res = await axios.get("/querylist");
        let arr = res.data.filter((item: any) => item.status === "有票");
        let s = arr.sort((a: any, b: any) => {
          return (
            a.time.replace(/[^0-9]/gi, "") - b.time.replace(/[^0-9]/gi, "")
          );
        });
        setData(s);
      })();
    } else if (!stateFlag && voteFlag) {
      console.log(123);
      (async () => {
        let res = await axios.get("/querylist");
        let arr = res.data.filter((item: any) => item.status === "有票");
        setData(arr);
      })();
    } else {
      (async () => {
        let res = await axios.get("/querylist");
        setData(res.data);
      })();
    }
  }, [stateFlag]);
  //深度监听筛选状态
  useEffect(() => {
    //  只看有票的改变
    if (voteFlag) {
      let arr = data.filter((item: any) => item.status === "有票");
      setData(arr);
    } else if (stateFlag && !voteFlag && sortFlag) {
      (async () => {
        let res = await axios.get("/querylist");
        let arr = res.data.filter((item: any) => item.state === "G");
        let s = arr.sort((a: any, b: any) => {
          return (
            a.time.replace(/[^0-9]/gi, "") - b.time.replace(/[^0-9]/gi, "")
          );
        });
        setData(s);
      })();
    } else if (stateFlag && !voteFlag) {
      (async () => {
        let res = await axios.get("/querylist");
        let arr = res.data.filter((item: any) => item.state === "G");
        setData(arr);
      })();
    } else {
      (async () => {
        let res = await axios.get("/querylist");
        setData(res.data);
      })();
    }
  }, [voteFlag]);
  //跳转到选座位页面
  const goseat = (item: any) => {
    if (item.status === "无票" || item.status === "已停售") {
      Toast(item.status);
    } else {
      console.log(item, "11");
      localStorage.setItem("obj", JSON.stringify(item));
      navigate("/seat");
    }
  };
  return (
    <div className="querylist">
      <header>
        <span onClick={goHome}>{"<"}</span>
        <span>北京-上海</span>
        <span></span>
      </header>
      <main>
        {data &&
          data.map((item: any, index: any) => {
            return (
              <div onClick={() => goseat(item)} className="box" key={index}>
                <div>
                  <span>{item.starttime}</span>
                  <span>{item.endtime}</span>
                </div>
                <div>
                  <span>{item.start}</span>
                  <span>{item.end}</span>
                </div>
                <div>
                  <span>{item.train}</span>
                  <span>{item.time}</span>
                </div>
                <div style={{ color: "orange" }}>
                  <span>￥{item.price}</span>
                  <span>{item.status}</span>
                </div>
              </div>
            );
          })}
      </main>
      <footer style={{ fontSize: "14px" }}>
        <span onClick={btnSort}>{title}</span>
        <span style={{ color: stateFlag ? "skyblue" : "#000" }} onClick={state}>
          只看高铁/动车
        </span>
        <span style={{ color: voteFlag ? "skyblue" : "#000" }} onClick={vote}>
          只看有票
        </span>
      </footer>
    </div>
  );
};

export default QueryList;
